<template>
  <div :id="id" :style="{ height: height + '%', width: width + '%' }"/>
</template>
<script>
export default {
  name: "VEChart",
  props: {
    height: {
      type: Number,
      default: 100
    },
    width: {
      type: Number,
      default: 100
    },
    options: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  data() {
    return {};
  },
  computed: {
    id: function() {
      return parseInt(Math.random() * 1000000);
    }
  },
  watch: {
    options() {
      this.renderChart();
    }
  },
  mounted() {
   this.renderChart()
  },
  updated() {
    this.renderChart();
  },
  methods: {
    renderChart: function() {
      if (this.chart) {
        this.chart.dispose();
      }
      const _this = this;
      this.chart = this.$echarts.init(document.getElementById(this.id));
      this.chart.setOption(this.options);
      this.chart.on("click", function(params) {
        if (params.componentType === "series") {
          const payload = {
            value: params.value
          };
          _this.$emit("seriesClick", payload);
        }
      });
      window.addEventListener("resize", () => {
        // console.log("lineresize");
        _this.chart.resize();
      });
    }
  },
  destroyed() {
    window.removeEventListener("resize", window);
  }
};
</script>
<style lang="scss" scoped>
</style>
